import React, {FC, Fragment} from 'react';
import "./index.less";
import {Checkbox, Empty, GetProps, Table} from "antd";
import {useControllableValue} from "ahooks";

export type HxFlexibleDataGridViewMode = "list" | "table"

interface HxFlexibleDataGridProps<RecordType extends Record<string, any>> {
  viewMode?: "list" | "table",
  header?: React.ReactNode,
  footer?: React.ReactNode,
  dataSource?: readonly RecordType[],
  rowKey?: string | keyof RecordType | ((record: RecordType, index?: number) => React.Key),
  //仅列表模式生效
  renderItem?: (item: RecordType, index: number) => React.ReactNode,
  tableProps?: Exclude<GetProps<typeof Table<RecordType>>, "dataSource" | "rowKey">,
  selectedRecords?: RecordType[],
  onSelectedRecordsChange?: (records: RecordType[])=>void
}

function HxFlexibleDataGrid<RecordType extends Record<string, any>>(props: HxFlexibleDataGridProps<RecordType>) {
  const {viewMode, header, footer, dataSource = [], renderItem, rowKey = "id", tableProps} = props;

  const [selectedRecords, setSelectedRecords] = useControllableValue<RecordType[]>(props, {
    defaultValue: [],
    valuePropName: "selectedRecords",
    trigger: "onSelectedRecordsChange",
  });

  return (
    <div className={"hx-flexible-data-grid-container"}>
      {header && <div className={"hx-flexible-data-grid-header"}>{header}</div>}
      {
        dataSource?.length > 0 ? (
          viewMode === "list" ? (
            <div className={"hx-flexible-data-list"}>
              {
                dataSource?.map((item, index) => {
                  const key = rowKey ? (typeof rowKey === "function" ? rowKey(item, index) : item[rowKey]) : index;
                  return (
                    <Fragment key={key}>
                      {renderItem?.(item, index)}
                    </Fragment>
                  );
                })
              }
            </div>
          ) : (
            <Table<RecordType>
              className={"hx-flexible-data-table"}
              rowKey={rowKey}
              dataSource={dataSource}
              pagination={false}
              rowSelection={{
                columnTitle: <div></div>,
                selectedRowKeys: selectedRecords?.map((record) => record.id),
                renderCell: (checked, record, index) => {
                  return (
                    <div style={{display: 'flex', alignItems: 'center', gap: 2}}>
                      <Checkbox className={"hx-list-seq"} checked={checked} onChange={(e) => {
                        const newSelectedRecords = e.target.checked
                          ? [...selectedRecords, record]
                          : selectedRecords.filter((target) => target.id!== record.id);
                        setSelectedRecords(newSelectedRecords);
                      }}>{record?.["_seq_"]}</Checkbox>
                      {/*<span style={{ color: '#666' }}>{serialNumber}</span>*/}
                    </div>
                  );
                }
              }}
              {...tableProps}
            />
          )
        ) : (
          <Empty/>
        )
      }

      {footer && <div className={"hx-flexible-data-grid-footer"}>{footer}</div>}
    </div>
  );
};

export default HxFlexibleDataGrid;
